import React from 'react';
import TodoItem from './TodoItem';
import '../assets/less/show.less';

class ShowTodo extends React.Component {
	
	toogle(index) {
		this.props.toogleItem(index);
	}
	
	onDelete(index) {
		console.log(index);
		this.props.onDelete(index);
	}
	
	renderItems(items) {
		
		return items.map(item => {
			let { text, completed, index } = item;
			return (
				<TodoItem key={index} text={text} completed={completed} index={index} toogleItem={this.toogle.bind(this, index)} onDelete={this.onDelete.bind(this, index)} />
			)
		})
		
	}
	
	render() {
		return (
			<div className='show-container'>
				<div className='show-head'>
					<span className='show-title'>{this.props.title}</span>
					<span className='show-num'>{this.props.items.length}</span>
				</div>
				<div className='show-body'>
					{this.renderItems(this.props.items)}
				</div>
			</div>
			
		)
	}
}

export default ShowTodo;